<template>
<div>
  <el-dialog title="VPN选项配置" :visible.sync="innerVpn" append-to-body width="65%">
    <el-tabs v-model="activeName">
      <el-tab-pane label="物理接口配置" name="first">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="interfaceName" label="接口名称"></el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="interfaceEdit(scope.row,scope.$index)" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="路由配置" name="second">
        <p class="topBar"><span @click="dialogVisible=true">新建路由</span></p>
        <el-table
          :data="vpn.defaultRoutings"
          border
          style="width: 100%">
          <el-table-column
            prop="destinationAddress"
            label="目的地址"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="mask"
            label="掩码"
            align="center"
            width="160">
          </el-table-column>
          <el-table-column
            prop="priority"
            align="center"
            label="优先级">
          </el-table-column>
          <el-table-column
            prop="nextHop"
            align="center"
            width="140"
            label="下一跳">
          </el-table-column>
          <el-table-column
            prop="outflowInterface"
            align="center"
            label="网络接口">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="vpn.defaultRoutings.splice(scope.$index,1)"
                type="text"
                size="small">
                移除
              </el-button>
              <el-button
                @click="editRouter(scope.row,scope.$index)" size="small" type="text">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- ipsec基本配置 -->
      <el-tab-pane label="ipsec基本配置" name="third">
        <el-form ref="form" label-width="120px">
          <el-form-item label="启用IPsec功能：">
            <el-checkbox v-model="isIpSecEnableFlag" name="type"></el-checkbox>
          </el-form-item>
          <el-form-item label="IKE秘钥周期：">
            <el-input v-model.number="vpn.ipsecConfiguration.ikecycle" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="IPsec秘钥周期：">
            <el-input v-model.number="vpn.ipsecConfiguration.ipsecCycle" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="预共享秘钥：">
            <el-input v-model="vpn.ipsecConfiguration.presharedKey" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="IKE端口设置:">
            <el-input v-model.number="vpn.ipsecConfiguration.ikeport" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="NAT端口设置:">
            <el-input  v-model.number="vpn.ipsecConfiguration.natport" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <!-- <el-form-item label="NAT端口设置：">
            <el-input v-model="vpn.ipsecConfiguration.natport" class="adjustInp" tyle="width:200px"></el-input>
          </el-form-item> -->
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="vpn规则配置" name="fourth">
        <el-form ref="form" label-width="120px">
          <el-form-item label="规则名：">
            <el-input v-model="vpn.vpnRules.ruleName" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="地址类型：">
            <el-select v-model="vpn.vpnRules.addressType">
              <el-option label="网络地址" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="本端保护网络：">
            <el-input v-model="vpn.vpnRules.localProtectionNetwork" placeholder="10.0.100.0/24" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="本端保护协议：">
            <el-select v-model="vpn.vpnRules.localProtectionProtocol">
              <el-option label="any" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对端保护网络：">
            <el-input v-model="vpn.vpnRules.peerProtectionNetwork" placeholder="10.0.101.0/24" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="对端保护协议：">
            <el-select v-model="vpn.vpnRules.peerProtectionProtocol">
              <el-option label="any" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="IKE配置" name="five">
        <el-form ref="form" label-width="120px">
          <el-form-item label="名称：">
            <el-input v-model="vpn.ikeConfiguration.ikename" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="类型：">
            <el-select v-model="vpn.ikeConfiguration.iketype" placeholder="请选择">
              <el-option label="默认网关" value="gateway"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对端地址类型：">
            <el-select v-model="vpn.ikeConfiguration.peerAddressType" placeholder="请选择">
              <el-option label="ip地址" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对端地址：">
            <el-input v-model="vpn.ikeConfiguration.peerAddress" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="协议类型：">
            <el-select v-model.number="vpn.ikeConfiguration.protocolType" placeholder="请选择">
              <el-option label="国际通用标准1" value="0"></el-option>
              <el-option label="国际通用标准2" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="认证方式：">
            <el-select v-model.number="vpn.ikeConfiguration.authenticateType" placeholder="请选择">
              <el-option label="预共享密码" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预共享秘钥：">
            <el-input v-model="vpn.ikeConfiguration.presharedKey" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="安全策略" name="six">
        <el-form ref="form" label-width="120px">
          <el-form-item label="序号：">
            <el-input v-model="securityPolicy.order" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="名称：">
            <el-input v-model="securityPolicy.name" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="源地址：">
            <el-select v-model="securityPolicy.sourceAddress" placeholder="请选择">
              <el-option label="any" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地址：">
            <el-select v-model="securityPolicy.destination" placeholder="请选择">
              <el-option label="any" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane> -->
      <el-tab-pane label="隧道配置" name="seven">
        <el-form ref="form" label-width="120px">
          <el-form-item label="隧道名称：">
            <el-input v-model="vpn.tunnelConfiguration.tunnelName" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="本地出口：">
            <el-select v-model="vpn.tunnelConfiguration.localExit" placeholder="请选择">
              <el-option label="eth1" value="eth1"></el-option>
              <el-option label="eth2" value="eth2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑定IKE：">
            <el-select v-model="vpn.tunnelConfiguration.bindingIKE" placeholder="请选择">
              <el-option label="test" value="test"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联VPN规则：">
           <!-- <el-select v-model="vpn.tunnelConfiguration.associatedVPNRules" placeholder="请选择">
              <el-option label="test" value="test"></el-option>
            </el-select> -->
             <el-input v-model="vpn.tunnelConfiguration.associatedVPNRules" class="adjustInp" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="是否启用：">
            <el-checkbox name="type" v-model="isTunnelEnableFlag"></el-checkbox>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="规格配置" name="eight">
        <el-form :inline="true" label-width="90px" label-position="left">
          <el-form-item label="规格模板">
            <el-select v-model="createVM.dname" placeholder="请选择模板" @change="VMChange">
              <el-option v-for="(n,i) in allCreateVM" :label="n.dname" :key="i" :value="n.dname"></el-option>
            </el-select>
          </el-form-item>
          <br/>
          <el-form-item label="CPU">
            <el-input v-model="createVM.vcpusNeed" class="adjustInp" :disabled="true" style="max-width:200px"></el-input>
          </el-form-item>
          <br/>
          <el-form-item label="磁盘空间">
            <el-input v-model="createVM.diskGbNeed" class="adjustInp" :disabled="true"
                      style="max-width:200px;background-color:#fff;"></el-input>
          </el-form-item>
          <br/>
          <el-form-item label="内存">
            <el-input v-model="createVM.memoryNeed" class="adjustInp" :disabled="true" style="max-width:200px"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="innerVpn = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="saveVpn" size="mini">保 存</el-button>
    </span>
  </el-dialog>
  <!-- 物理网口配置对话框 -->
  <el-dialog title="物理网口配置" :visible.sync="interfacesShow" width="50%" append-to-body>
    <el-form ref="form" label-width="100px">
      <el-form-item label="接口名称" prop="interfaceName">
        <el-input v-model="physicalInterfacesEthx.interfaceName" class="adjustInp" disabled style="width:200px"/>
      </el-form-item>
      <el-form-item label="工作模式">
        <el-select v-model="physicalInterfacesEthx.operatingMode" placeholder="请选择">
          <el-option label="路由模式" :value="0"></el-option>
          <el-option label="透明模式" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="网络">
        <el-select v-model="physicalInterfacesEthx.netWorkName" placeholder="请选择">
          <el-option v-for="(item,index) in netWorkName" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="IP地址获取">
        <el-select v-model="physicalInterfacesEthx.ipobtainMode" placeholder="请选择">
          <el-option label="通过DHCP获取" :value="0"></el-option>
          <el-option label="静态配置" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="IP地址">
        <el-input v-model="ipaddressAndMask01" class="adjustInp" style="width:200px"></el-input>
        /
        <el-input v-model="IPMask" class="adjustInp" style="width:200px"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="interfacesShow = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="interfacesSurBtn(ipaddressAndMask01,IPMask,flag)" size="mini">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 新建路由设置 -->
  <el-dialog
    title="新建路由"
    :visible.sync="dialogVisible"
    width="50%"
    append-to-body>
    <el-form label-width="120px" label-position="left">
      <el-form-item label="目的地址">
        <el-input v-model="routingConfigurationsObj.destinationAddress" class="adjustInp"
                  placeholder="请输入IP地址类型（IPv4）"></el-input>
      </el-form-item>
      <el-form-item label="掩码">
        <el-input v-model="routingConfigurationsObj.mask" class="adjustInp"></el-input>
      </el-form-item>
      <el-form-item label="优先级">
        <el-input class="adjustInp" v-model.number="routingConfigurationsObj.priority"></el-input>
        <span>（1~9999）</span>
      </el-form-item>
      <el-form-item label="下一跳">
        <el-input class="adjustInp" v-model="routingConfigurationsObj.nextHop"></el-input>
      </el-form-item>
      <el-form-item label="网络接口">
        <el-select v-model="routingConfigurationsObj.outflowInterface">
          <el-option label="eth1" value="eth1"></el-option>
          <el-option label="eth2" value="eth2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
    <el-button type="primary" size="mini" @click="confirm(routingConfigurationsObj,routeIndex)">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  props: ['netWorkName','allCreateVM','allData'],
  data() {
    return {
      flag: 0,
      routeIndex: 0,
      isNew: true,
      innerVpn: false,
      dialogVisible: false,
      interfacesShow: false,
      activeName: 'first',
      tableData: [
        { interfaceName: 'eth1' },
        { interfaceName: 'eth2' }
      ],
      ipaddressAndMask01: '',
      IPMask: '',
        isIpSecEnableFlag:true,
        isTunnelEnableFlag:true,

      physicalInterfacesEthx: { // 物理接口配置
        interfaceName: '', // 接口名称
        enableFlag: null,
        operatingMode: null, // 工作模式
        ipobtainMode: null, // 工作地址获取
        ipaddressAndMask: '',
        netWorkName: ''
      },
      routingConfigurationsObj: {
        destinationAddress: "", //IP地址（IPv4）
        mask: "", //IP掩码类型
        nextHop: "", //IP地址（IPv4）  下一跳地址的子网需要和流出网口配置的子网相同
        outflowInterface: "",	//选项：配置为路由模式的物理接口
        priority: null, //1-9999
        weights: null
      },
      createVM: {
        diskGbNeed: 20,
        dname: "模板3",
        hostId: "22",
        hostName: "1",
        memoryNeed: 2,
        reProduce: false,
        tmpId: 6,
        vcpusNeed: 2
      },
      vpn: {
        vpnType: 0,
        interfaceTraffic: 0,
        vpnName: '',
        physicalInterfaces: [],
        defaultRoutings: [],
        ikeConfiguration: {// IKE配置
          ikename: 'test', // 名称
          iketype: 'gateway', // 类型
          peerAddressType: '1', // 对端地址类型
          peerAddress: '10.0.102.12', // 对端地址
          protocolType: '0', // 协议类型
          authenticateType: '0', // 认证方式
          presharedKey: 'TypeYourPrekey'// 预共享密码
        },
        ipsecConfiguration: {// IPSEC基本配置
          enableFlag: true, // 是否启用ipsec
          ikecycle: 28800, // ike秘钥周期
          ipsecCycle: '3600', // ipsec秘钥周期
          presharedKey: 'TypeYourPrekey', // 预共享密码
          ikeport: '500', // ike端口设置
          natport: '4500' // NATd端口设置
        },
        tunnelConfiguration: { // 隧道配置
          tunnelName: 'test', // 名称
          localExit: 'eth2', // 本地出口
          bindingIKE: 'test', // 绑定ike
          associatedVPNRules: 'test', // 关联vpn规则
          enableFlag: true
        },
        vpnRules: {  // vpn规则
          addressType: '0',	// 默认选择地址类型即可
          localProtectionNetwork: '10.0.100.0/24',	// 填写ipsec本端保护子网
          localProtectionProtocol: 'any',	// 选择默认any即可
          localProtectionType: 'subnet',	// 默认选择网络地址
          peerProtectionNetwork: '10.0.101.0/24', // 填写ipsec对端保护子网
          peerProtectionProtocol: 'any', // 选择默认any即可
          ruleName: 'test' // 用户自行填写
        }
      }
    }
  },
  watch: {
    allData(val) {
      if(val) {
        if(val.vpn) {
          console.log(val, 'val.vpn')
          let vpn = Object.assign({},val.vpn)
          this.tableData = vpn.physicalInterfaces ? vpn.physicalInterfaces : []
          this.vpn.defaultRoutings = vpn.defaultRoutings ? vpn.defaultRoutings : []
          this.vpn.ipsecConfiguration = vpn.ipsecConfiguration ? vpn.ipsecConfiguration : {}
          this.vpn.vpnRules = vpn.vpnRules ? vpn.vpnRules : {}
          this.vpn.ikeConfiguration = vpn.ikeConfiguration ? vpn.ikeConfiguration : {}
          this.vpn.tunnelConfiguration = vpn.tunnelConfiguration ? vpn.tunnelConfiguration : {}
          this.createVM = val.createVM
            this.isIpSecEnableFlag = (vpn.ipsecConfiguration.enableFlag === 1)
            this.isTunnelEnableFlag = (vpn.tunnelConfiguration.enableFlag === 1)
          // let eable = !!vpn.ipsecConfiguration.enableFlag
          // let eable1 = !!vpn.ipsecConfiguration.enableFlag
          // this.vpn.tunnelConfiguration.enableFlag = eable
          // this.vpn.ipsecConfiguration.enableFlag = eable1
        } else {
          let arr = [
            { interfaceName: 'eth1' },
            { interfaceName: 'eth2' }
          ]
          this.tableData = []
          this.tableData.push(...arr)
          this.ipaddressAndMask01 = ''
          this.IPMask = ''
          let phy = { // 物理接口配置
            interfaceName: '', // 接口名称
            enableFlag: null,
            operatingMode: null, // 工作模式
            ipobtainMode: null, // 工作地址获取
            ipaddressAndMask: '',
            netWorkName: ''
          }
          this.physicalInterfacesEthx = Object.assign({},phy)
          this.routingConfigurationsObj = {
            destinationAddress: "", //IP地址（IPv4）
            mask: "", //IP掩码类型
            nextHop: "", //IP地址（IPv4）  下一跳地址的子网需要和流出网口配置的子网相同
            outflowInterface: "",	//选项：配置为路由模式的物理接口
            priority: null, //1-9999
            weights: null
          }
          this.createVM = {
            diskGbNeed: 20,
            dname: "模板3",
            hostId: "22",
            hostName: "1",
            memoryNeed: 2,
            reProduce: false,
            tmpId: 6,
            vcpusNeed: 2
          }
          this.vpn.physicalInterfaces = []
          this.vpn.defaultRoutings = []
          this.vpn.ikeConfiguration = {
              ikename: 'test', // 名称
              iketype: 'gateway', // 类型
              peerAddressType: '1', // 对端地址类型
              peerAddress: '10.0.102.12', // 对端地址
              protocolType: '0', // 协议类型
              authenticateType: '0', // 认证方式
              presharedKey: 'TypeYourPrekey'// 预共享密码
          }
          this.vpn.ipsecConfiguration = {
              enableFlag: true, // 是否启用ipsec
              ikecycle: 28800, // ike秘钥周期
              ipsecCycle: '3600', // ipsec秘钥周期
              presharedKey: 'TypeYourPrekey', // 预共享密码
              ikeport: '500', // ike端口设置
              natport: '4500' // NATd端口设置
          }
          this.vpn.tunnelConfiguration = {
              tunnelName: 'test', // 名称
              localExit: 'eth2', // 本地出口
              bindingIKE: 'test', // 绑定ike
              associatedVPNRules: 'test', // 关联vpn规则
              enableFlag: true
          }
          this.vpn.vpnRules = {
              addressType: '0',	// 默认选择地址类型即可
              localProtectionNetwork: '10.0.100.0/24',	// 填写ipsec本端保护子网
              localProtectionProtocol: 'any',	// 选择默认any即可
              localProtectionType: 'subnet',	// 默认选择网络地址
              peerProtectionNetwork: '10.0.101.0/24', // 填写ipsec对端保护子网
              peerProtectionProtocol: 'any', // 选择默认any即可
              ruleName: 'test' // 用户自行填写
          }
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    showVpn(name) {
      this.vpn.vpnName = name
      this.vpn.physicalInterfaces = []
      this.innerVpn = true
    },
    saveVpn() {
        // debugger
      let eable = this.isTunnelEnableFlag ? 1 : 0
      let eable1 =  this.isIpSecEnableFlag ? 1 : 0
      this.vpn.tunnelConfiguration.enableFlag = eable
        this.vpn.ipsecConfiguration.enableFlag = eable1

        let newPhy = Object.assign([], this.tableData)
        this.vpn.physicalInterfaces = newPhy
      let obj = { vpn: Object.assign({},this.vpn), createVM: Object.assign({},this.createVM) }
      this.$emit('vpnData',obj)
      this.innerVpn = false
    },
    confirm(data,i) {
      let obj = Object.assign({},data)
      if(this.isNew) {
        this.vpn.defaultRoutings.push(obj)
      } else {
        this.$set(this.vpn.defaultRoutings,i,obj)
      }
      this.isNew = true
      this.dialogVisible = false
    },
    editRouter(row,i) {
      this.routingConfigurationsObj = row
      this.routeIndex = i
      this.isNew = false
      this.dialogVisible = true
    },
    interfaceEdit(e,i) {
      this.flag = i
      this.physicalInterfacesEthx = Object.assign({},e)
      if(e.ipaddressAndMask) {
        let maskArr = e.ipaddressAndMask.split("/")
        this.ipaddressAndMask01 = maskArr[0]
        this.IPMask = maskArr[1]
      }
      this.interfacesShow = true
    },
    interfacesSurBtn(str1,str2,i) {
      this.physicalInterfacesEthx.ipaddressAndMask = `${str1}/${str2}`
      // this.vpn.physicalInterfaces[i] = Object.assign({},this.physicalInterfacesEthx)
        let newObj = Object.assign({},this.physicalInterfacesEthx)
        this.$set(this.tableData,i,newObj)
        // this.$set(this.vpn.physicalInterfaces,i,newObj)
      this.ipaddressAndMask01 = ''
      this.IPMask = ''
      this.interfacesShow = false
    },
    VMChange(str) {
      let obj = this.allCreateVM.filter(n => n.dname == str)[0]
      this.createVM = Object.assign({},obj)
    }
  }
}
</script>

<style scoped>
  .topBar {
    display: block;
    margin: 0;
    padding: 0 14px;
    margin-bottom: 6px;
    color: #3E8EF7;
    height: 20px;
    font: 16px/20px '微软雅黑';
    text-align: right;
  }
</style>
